<template>
  <div class="home-head">
    <h1>猫眼电影</h1>
    <!-- 身体部分使用有序，在里面嵌套盒子使用 -->
    <ul class="home-body">
      <div id="home-body-li">
        <li>阿坝∨</li>
      </div>
      <!-- 这里热映和电影的跳转是属于同一性质的，因此，在代码思路上可以合二为一 -->
      <div id="home-body-li">
        <li @click="showOn">
          <router-link to="/" :class="[{active:light == 4}]">热映</router-link>
        </li>
        <!-- 定义v-if进行隐藏与显示 -->
        <div class="home-body-hidden" v-if="xian">
          <div class="home-body-part">
            <li v-for="item in movieList" :key="item.movieId">
              <div class="home-body-view">
                <!-- 电影画报 -->
                <div class="home-body-view-left">
                  <img :src="item.img" />
                </div>
                <div class="home-body-view-center">
                  <h3>{{item.name}}</h3>
                  <p>{{item.text}}</p>
                  <p>{{item.star}}</p>
                  <p>{{item.state}}</p>
                </div>

                <div class="home-body-view-right">
                  <h2>{{item.socre}}</h2>
                  <p>购票</p>
                </div>
              </div>
              <!-- <div class="dian"></div> -->
            </li>
          </div>
        </div>
      </div>


      <div id="home-body-li">
        <li @click="waitShow">
          <router-link to="/" :class="[{ active: light == 5 }]">待映</router-link>
        </li>
        <div class="home-body-wait" v-if="showWait">
          <div class="home-body-waitPart">

            <div class="home-body-wait-top">
              <h4>近期最受欢迎</h4>
              <div class="home-body-wait-center">

                <van-swipe class="home-body-wait-pic" :autoplay="3000" indicator-color="white" :loop="true"
                  :width="600">
                  <van-swipe-item v-for="wait in waitList" :key="wait.id">
                    <van-image class="images" :src="wait.img" />
                    <p>影名:{{wait.nm}} |</p>
                    <p>{{wait.wish}}人想看 | </p>
                    <p>时间：{{wait.comingTitle}}</p>
                  </van-swipe-item>
                </van-swipe>
                <!-- <li v-for="wait in waitList" :key="wait.id ">
                  <div class="home-body-wait-pic">
                     <img :src="wait.img"/> 
                    <p>{{wait.nm}}</p>
                    <p>{{wait.wish}}人想看</p>
                    <p>{{wait.comingTitle}}</p>
                  </div>
                </li> -->

              </div>
              <h4>2022年 待定</h4>

              <div class="home-body-bottom">
                <li v-for="waitting in waittingList" :key="waitting.id">
                  <div class="home-body-wait-partTwo">
                    <div class="home-body-view-bottom">
                      <div class="home-body-waitLeft">
                        <img :src="waitting.img" />
                      </div>
                      <div class="home-body-waitCenter">
                        <div class="home-body-waitCenterOne">
                          <h3>{{waitting.nm}}</h3>
                          <p>{{waitting.clas}}</p>
                          <p>{{waitting.star}}</p>
                        </div>
                        <div class="home-body-waitRight">
                          <h5>{{waitting.wish}}<span>人想看</span></h5>
                          <p>预售</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </div>
              <div class="dian"></div>
            </div>
          </div>
        </div>
      </div>

      <div id="home-body-li">
        <!-- <li @click="lighe=6"> -->
          <router-link to="search" :class="[{active:light == 6}]">❍</router-link>
        <!-- </li> -->
      </div>
      <!--  <input type="text" placeholder="请输入想要搜索的电影" style="text-align:center;width:180px"/> -->
    </ul>
    <!-- <div class="home-body-hr">
      <hr />
    </div>-->

  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  data() {
    return {
      light: 1,
      xian:true, //默认显示热映
      showWait:false,
      movieList: [
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd671be15bf51baf0ee3a5d06b91bf94c3.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "侏罗纪世界3",
          socre: 8,
          movieId: 1187439,
          text:"动作，冒险，科幻",
          star:"主演：克里斯·柏拉特，布莱斯… ",
          state:"今天214家影院放映4141场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd671be151b2ff711e5024a88733756aae.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "暗恋·橘生淮南",
          socre: 8.3,
          movieId: 1308364,
          text: "爱情，青春",
          star:"主演：张雪迎，辛云来，伍嘉成",
          state: "今天142家影院放映395场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd671b12f2ad7c3d7c37db5a7ce2aadac9.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "一周的朋友",
          socre: 8.1,
          movieId: 1336701,
          text: "剧情，青春",
          star:"主演：赵今麦，林一，沈月",
          state:"今天210家影院放映1774场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd67171f2ff338f31397eddc97451194d8.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "坏蛋联盟",
          socre: 9.1,
          movieId: 1298265,
          text:"喜剧，动画，动作",
          star:"主演：山姆·洛克威尔，秦昊，奥…",
          state:"今天166家影院放映510场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd687b5351b87a9b5356cb3df409d810a0.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "哆啦A梦：大雄的…",
          score: 8.4,
          movieId: 1372606,
          text: "动画，故事",
          star:"主演：哆啦A梦，大熊，山治",
          state:"今天288家影院放映439场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd671339c7e8ea33139d0476cb0d92908d.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "人生大事",
          socre: 9.7,
          movieId: 1397016,
          text: "剧情，家庭",
          star:"主演：朱一龙，王戈",
          state: "今天399家影院放映了1888场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd69a8eac7e7a3539dd3abbabc299e2f10.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "精灵旅社4·变身大…",
          score: 9,
          movieId: 1263216,
          text:"动画，剧情",
          star:"主演：亚当·桑德勒，赛琳娜·戈…",
          state:"今天324家影院放映了9876场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd6877a3c692c9517893eb18848de814d8.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "唐顿庄园2",
          score: 8.8,
          movieId: 1324996,
          text:"剧情，爱情",
          star:"主演：米歇尔·道克瑞，休·博内…",
          state:"今天654家影院放映了876场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd69a030338ddd2300b1f3b191305438ba.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "密室逃生2",
          score: 8.3,
          movieId: 1298049,
          text:"悬疑，惊悚",
          star:"主演：泰勒·拉塞尔，洛根·米勒…",
          state: "今天678家影院放映了1234场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd687ecdc7e2ff7af339b7138f3b0d2d70.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "天才计划",
          score: 7.8,
          movieId: 1205957,
          text:"惊悚，悬疑",
          star:"主演：丹尼尔·雷德克里夫，伊…",
          state:"今天345家影院放映了987场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd602d7c807d7c3cbae3e4517bbee2a46d.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "神奇动物：邓布…",
          score: 7.9,
          movieId: 1395465,
          text:"惊悚，悬疑",
          star:"主演：苏小妹，罗翔，曾漪莲…",
          state: "今天675家影院放映了1568场"
        },
        {
          img:
            "https://p0.pipi.cn/mmdb/25bfd6719ab339b860af333d9ae02439e6179.jpg?imageMogr2/thumbnail/2500x2500%3E",
          name: "你是我的春天",
          score: 0,
          movieId: 1410425,
          text:"剧情",
          star:"主演：周冬雨，伊眆，宋小宝…",
          state:"今天899家影院放映了4556场"
        }
      ],
      waitList:[
        {
          id: 1397016, 
          img: "https://p0.pipi.cn/mmdb/25bfd671339c7e8ea33139d0476cb0d92908d.jpg?imageMogr2/thumbnail/2500x2500%3E", 
          wish: 399588, 
          wishst: 0, 
          nm: "人生大事", 
          comingTitle: "6月24日 周五"
        },
        {
          id: 1410425,
          img: "https://p0.pipi.cn/mmdb/25bfd6719ab339b860af333d9ae02439e6179.jpg?imageMogr2/thumbnail/2500x2500%3E",
          wish: 107183,
          wishst: 0,
          nm: "你是我的春天",
          comingTitle: "7月1日 周五"
        },
        {
          id: 1398840, 
          img: "https://p0.pipi.cn/mmdb/25bfd68d8ea923c7edf0ee3aeaefbb953b77c.jpg?imageMogr2/thumbnail/2500x2500%3E", 
          wish: 55900, 
          wishst: 0, 
          nm: "学爸", 
          comingTitle: "7月8日 周五"
        },
        {
          id: 1203439, 
          img: "https://p0.pipi.cn/mmdb/25bfd671c6951bcbaeaf33da3f0d6ec74ad54.jpg?imageMogr2/thumbnail/2500x2500%3E", 
          wish: 82149, 
          wishst: 0, 
          nm: "神探大战", 
          comingTitle: "7月8日 周五"
        },
        {
          id: 1441467, 
          img: "https://p0.pipi.cn/mmdb/25bfd69af2adddcf3e030c429437e8baaaef7.jpg?imageMogr2/thumbnail/2500x2500%3E", 
          wish: 30968, 
          wishst: 0, 
          nm: "新秩序", 
          comingTitle: "7月8日 周五"
        },
        {
          id: 1367325, 
          img: "https://p0.pipi.cn/mmdb/25bfd69a3382ffbe12d23c68cdcf9582fbdab.jpg?imageMogr2/thumbnail/2500x2500%3E", 
          wish: 73768, 
          wishst: 0, 
          nm: "惊天救援", 
          comingTitle: "7月8日 周五"
        },
        {
          id: 1357145, 
          img: "https://p0.pipi.cn/mmdb/25bfd671dddf2a9257925782f4b706e5181dc.jpg?imageMogr2/thumbnail/2500x2500%3E", 
          wish: 108666, 
          wishst: 0, 
          nm: "外太空的莫扎特", 
          comingTitle: "7月15日 周五"
        },
      ],
      waittingList:[
        {
          id: 1379055,
          img: "https://p0.pipi.cn/mmdb/d2dad5927a387af2aa87a97bc672396e18bfc.jpg?imageMogr2/thumbnail/2500x2500%3E",
          wish: 29153,
          wishst: 0,
          nm: "请别相信她",
          comingTitle: "2022年 待定",
          star:"演员：章若楠，吴昱翰…",
          clas:"喜剧，爱情"
        },
        {
          id: 1335230,
          img: "https://p0.pipi.cn/mmdb/25bfd60206d51b51ba9235eb600dc98957e56.jpg?imageMogr2/thumbnail/2500x2500%3E",
          wish: 231635,
          wishst: 0,
          nm: "哥，你好",
          comingTitle: "2022年 待定",
          star: "演员：考辛斯·休顿，赛琳娜…",
          clas: "喜剧，动作"
        },
        {
          id: 1359034,
          img: "https://p0.pipi.cn/mmdb/25bfd60233951bf0ee8ea33d345d2e6de1a34.jpg?imageMogr2/thumbnail/2500x2500%3E",
          wish: 277183,
          wishst: 0,
          nm: "独行月球",
          comingTitle: "2022年 待定",
          star: "演员：沈腾，吴昱翰…",
          clas: "科幻，家庭"
        },
      ]
    };
  },
  methods:{
    waitShow(){
     //监听是否点击了待映
     if(this.showWait == false){
      this.xian = false;  //关闭热映
      this.showWait = true; //显示待映
     }
    },
    // 如果点击了待映就关闭热映，显示待映；
    // 如果点击了待映就关闭待映，显示热映
    showOn() {
      //默认是显示的
      //监听是否点击了热映，如果点了动态隐藏待映的
      //if(this.xian = true)
      if (this.xian == false) {
        this.xian = true;
        this.showWait =false;
      }
    },
  
  }
};
</script>

<style scoped>
/* 头部身体部分的样式属性 */
* {
  margin: 0;
  padding: 0;
}
.home-head {
  width: 100%;
}

.home-head h1 {
  width: 100%;
  height: 5vh;
  background-color: #9c0e0cda;
  font-size: 22px;
  display: flex;
  justify-content: center;
  color: #e2dedd;
  font-family: "宋体";
  padding-top: 10px;
}

.home-head .home-body {
  /* width: 99.7%;
  height: 4vh;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  text-align: center;
  padding-top: 18px ;
  color: #424041;
  background-color:rgba(245, 245, 245, 0.247);
  border: 1px #e2deddd7 solid; */
  /* border: 1px red solid; */
  border: 1px #e2deddd7 solid; 
  display: flex;
  justify-content: space-around;
  height: 45px;
  text-align: center;
  font-size: 17px;
  background-color: rgba(245, 245, 245, 0.247);
  color: #424041;
}
#home-body-li {
  /* border: 1px red solid;  */
  width: 110px;
  padding-top: 6px;
  
}

  #home-body-li h4{
    /* width: 100%; */
    /* border: 1px red solid; */
    display: flex;

    font-size: 20px solid;
    font-family: "楷书";
    justify-content: center;
    padding-bottom: 5px;
    margin:10px 10px;
  
}

#home-body-li:hover {
  color: rgb(27, 26, 26);
  background-color: #4240411c;
}

#home-body-li-one:hover {
  color: black;
  background-color: #4240411c;
}

/* .home-head .home-body li:hover{
  text-decoration: underline;
  color: rgba(255, 0, 0, 0.719);

} */

/* .home-head .home-body-hr hr{
  margin-top: 8px;
  color: #e2dedd;
} */

/* 视图部分样式 */
.home-body-part{
  width:100%;
  position: absolute; 
  /* display: flex; */
  justify-content: space-around;
  left: 0px;
  margin-top: 25px;
}
.home-body-view {
  /* width: 410px; */
   display: flex; 
  border: 1px #e2dedd63 solid;
  /* justify-content: space-around; */
  margin-top:15px;
  /* border: 1px black solid; */
  
}
.home-body-view-left {
  width: 120px;
  height: 150px;
  display: flex;
  justify-content: space-around;
  margin-left: 10px;
  /* border: 1px black solid;  */
  padding-bottom: 10px;
  padding-top: 10px;
}
.home-body-view-center {
  width: 100%;
}
.home-body-view-center h3{
  display: flex;
  padding-left: 10px;
  margin-top: 8px;
  color: rgba(0, 0, 0, 0.685);
  font-size: 25px;
}

.home-body-view-center p{
  display: flex;
  margin-left: 9px;
  overflow: hidden;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.411);
}

.home-body-view-right {
  /* display: flex; */
  width: 90px;
  /* border: 1px red solid; */
  margin-right: 10px;
}

.home-body-view-right h2{
  color:orange;
  margin-top: 10px;
  font-size: 40px;
}
.home-body-view-right p{
  height: 30px;
  text-align: center;
  border-radius: 8px;
  background-color: rgba(139, 0, 0, 0.842);
  color:white;
  padding-top: 5px;
}

/* 待映部分 */

.home-body-wait{
  width: 100%;
  position: absolute;
    /* display: flex; */
  justify-content: space-around;
  left: 0px;
  margin-top: 25px;
}.home-body-wait h4{
    display: flex;
    overflow: hidden;
    font-size: 14px solid;
    font-family: "楷书";
    justify-content: center;
    padding-bottom: 5px;
}
.home-body-wait-top{
  width: 100%;
}
.home-body-wait-center{
  width: 100%;
  display: flex;
}

.home-body-wait-pic{
  width: 100%;
  border: 1px rgba(0, 0, 0, 0.233) solid;
  /* padding: 5px 0px ;  */
  text-align: center;
  font-size: 15px;
  font-weight: 1900px;
  margin: 0px 10px ;
  /* border-radius: 25px; */
  
}

.home-body-wait-pic .images{
  width: 100%;
  height: 100%;
  display: flex;
  /* border: 1px red solid; */
  height: 20ch;
}
.home-body-wait-pic p{
  /* width: 100%; */
  display: flex;
  justify-content: center;
  float: left;
  padding-left: 15px;
  padding-top: 5px;
  color: rgba(0, 0, 0, 0.514);
  overflow: hidden;
}

/* 底部待定电影热播 */
.home-body-bottom{
  width: 100%;
}
.home-body-wait-partTwo{
  width: 100%;
  display: flex; 
  border: 1px rgba(0, 0, 0, 0.151) solid;
  /* margin-bottom:5px ; */
  left: 0px;
      /* width: 100%;
      position: absolute;
      justify-content: space-around;
      left: 0px;
      margin-top: 25px; */
}
.home-body-view-bottom{
  width: 100%;
}
.home-body-waitLeft{
  /* border: 1px red solid; */
  /* display:flex;
  height: 15ch;
  padding-left: 10px;
  padding-top: 10px;
  width: 100%;
  border: 1px red solid; */
    width: 96%;
    display: flex;
    justify-content: space-around;
    margin-left: 10px;
    /* padding-bottom: 10px; */
    padding-top: 10px;
    margin-right: 10px;
}
.home-body-waitLeft img{
  width: 100%;
  height: 25ch;
  display: flex;
}
.home-body-waitCenter{
   display: flex; 
   border: 1px rgba(0, 0, 0, 0.336) solid;
   justify-content: space-between;
   margin: 10px 9px;
}
.home-body-waitCenter h3{
  display: flex;
  padding-top: 8px;
  padding-left: 10px;
  color: rgba(0, 0, 0, 0.582); 
    /* display: flex;
    padding-left: 10px;
    margin-top: 8px;
    color: rgba(0, 0, 0, 0.685);
    font-size: 25px; */
}
.home-body-waitCenter p{
  display: flex;
  padding-top: 3px;
  margin-left: 9px;
  /* border: 1px red solid; */
  color: rgba(0, 0, 0, 0.445);
  font-size: 15px; 
      /* display: flex;
      margin-left: 9px;
      overflow: hidden;
      font-size: 15px;
      color: rgba(0, 0, 0, 0.411); */
}

.home-body-waitRight{
  /* border: 1px red solid; */
  width:130px;
  margin-right: 10px;
}

.home-body-waitRight h5{
  padding-top: 14px;
  font-size: 22px;
  color: orange;
  
}

.home-body-waitRight span{
  color: orange(0, 0, 0, 0.671);
  font-size:10px
}
.home-body-waitRight p{
  width: 60px;
  height: 25px;
  /* border: 1px red solid; */
  display: flex;
  margin-left: 25px; 
  padding-top:6px;
  border-radius: 10px;
  background-color: rgba(0, 0, 255, 0.575);
  color: white;
  justify-content: center;
}

.dian{
  /* border: 1px red solid; */
  height: 60px;
  width: 100%;
}
</style>
